<template>
	<view class="page" v-if="pageData">
		<view class="top-box" :class="{ filter: pageData.state == 97 || pageData.state == 98 }">
			<template v-if="pageData.state == 0">
				<view class="state">未支付</view>
				<image src="../../static/state-weizhifu.png" class="state-img"></image>
			</template>
			<template v-if="pageData.state == 1 && pageData.delivery == 1">
				<view class="state">待发货</view>
				<image src="../../static/state-daifahuo.png" class="state-img"></image>
			</template>
			<template v-if="pageData.state == 1 && pageData.delivery == 2">
				<view class="state">备货中</view>
				<image src="../../static/state-daifahuo.png" class="state-img"></image>
			</template>
			<template v-if="pageData.state == 2 && pageData.delivery == 1">
				<view class="state">已发货</view>
				<image src="../../static/state-daibeihuo.png" class="state-img"></image>
			</template>
			<template v-if="pageData.state == 2 && pageData.delivery == 2">
				<view class="state">待取货</view>
				<image src="../../static/state-daibeihuo.png" class="state-img"></image>
			</template>
			<template v-if="pageData.state == 3">
				<view class="state">待确认</view>
				<image src="../../static/state-fahuozhong.png" class="state-img"></image>
			</template>
			<template v-if="pageData.state == 4">
				<view class="state">未评价</view>
				<image src="../../static/state-yiwancheng.png" class="state-img"></image>
			</template>

			<template v-if="pageData.state == 5">
				<view class="state">已评价</view>
				<image src="../../static/state-yiwancheng.png" class="state-img"></image>
			</template>
			<template v-if="pageData.state == 6">
				<view class="state">退款中</view>
				<image src="../../static/state-tuikuanzhong.png" class="state-img"></image>
			</template>
			<template v-if="pageData.state == 96">
				<view class="state">退款成功</view>
				<image src="../../static/state-tuikuanzhong.png" class="state-img"></image>
			</template>
			<template v-if="pageData.state == 97">
				<view class="state">已失效</view>
				<image src="../../static/state-yishixiao.png" class="state-img"></image>
			</template>
			<template v-if="pageData.state == 98">
				<view class="state">已取消</view>
				<image src="../../static/state-yishixiao.png" class="state-img"></image>
			</template>
			<!-- <view class="state">待审核</view>
			<image src="../../static/state-daishenhe.png" class="state-img"></image> -->
		</view>
		<view class="Info">
			<view class="rows m-top10" v-if="pageData.table_name">
				<text class="name">桌号</text>
				<text class="msg flex">{{ pageData.table_name }}</text>
			</view>
			<view class="rows m-top10" v-if="pageData.siteName">
				<text class="name">宴会名称</text>
				<text class="msg flex">{{ pageData.siteName }}</text>
			</view>

			<view class="rows m-top10" v-if="pageData.open_date">
				<text class="name">开宴时间</text>
				<text class="msg flex">{{ pageData.open_date }}</text>
			</view>
		</view>
		<view class="Info">
			<view class="title">收货人信息</view>
			<view class="item flex-box">
				<text class="name">姓名</text>
				<text class="msg flex">{{ pageData.uname ? pageData.uname : '' }}</text>
			</view>
			<view class="item flex-box">
				<text class="name">电话</text>
				<text class="msg flex">{{ pageData.utel ? pageData.utel : '' }}</text>
				<image src="../../static/icon-phone.png" class="icon" @click="call" v-if="pageData.utel"></image>
			</view>
			<view class="item flex-box" @click="$common.openLocation(pageData)">
				<text class="name">地址</text>
				<text class="msg flex">{{ pageData.address ? pageData.address : '' }}</text>
			</view>
			<view class="item flex-box">
				<text class="name">备注</text>
				<text class="msg flex">{{ pageData.remarks ? pageData.remarks : '无' }}</text>
			</view>
		</view>
		<view class="Info">
			<view class="title">订单信息</view>
			<view class="item flex-box">
				<text class="name">订单编号</text>
				<text class="msg flex">{{ pageData.order_code ? pageData.order_code : '' }}</text>
				<text class="copy" @click="copy_text('222')">复制</text>
			</view>
			<view class="item flex-box" v-if="pageData.pay_time">
				<text class="name">下单时间</text>
				<text class="msg flex">{{ pageData.pay_time ? pageData.pay_time : '' }}</text>
			</view>
			<view class="item flex-box" v-if="pageData.type == 1 || pageData.type == 2">
				<text class="name">订单类型</text>
				<text class="msg flex" v-if="pageData.type == 1">特价</text>
				<text class="msg flex" v-if="pageData.type == 2">团购</text>
			</view>
			<view class="item flex-box">
				<text class="name">配送方式</text>
				<text class="msg" v-if="pageData.delivery == 2">自提</text>
				<text class="msg" v-if="pageData.delivery == 1">物流</text>
			</view>
			<view class="item flex-box">
				<text class="name">订单状态</text>
				<text class="msg flex">
					<template v-if="pageData.state == 1 && pageData.delivery == 1"> 待发货 </template>
					<template v-if="pageData.state == 1 && pageData.delivery == 2"> 备货中 </template>
					<template v-if="pageData.state == 2 && pageData.delivery == 1"> 已发货 </template>
					<template v-if="pageData.state == 2 && pageData.delivery == 2"> 待取货 </template>
					<template v-if="pageData.state == 3"> 待确认 </template>
					<template v-if="pageData.state == 6"> 退款中 </template>
					<template v-if="pageData.state == 96"> 退款成功 </template>
					<template v-if="pageData.state == 97"> 已失效 </template>
					<template v-if="pageData.state == 98"> 已取消 </template>
					<template v-if="pageData.state == 0"> 未支付 </template>
					<template v-if="pageData.state == 4"> 未评价 </template>

					<template v-if="pageData.state == 5"> 已评价 </template>
				</text>
				<text class="copy" v-if="pageData.state == 0" @click="showConfirm = true">确认订单</text>
			</view>
			<view class="item flex-box" v-if="parseInt(pageData.state) > 0 && parseInt(pageData.state) < 6">
				<text class="name">支付方式</text>
				<text class="msg" v-if="pageData.pay_type == 1 && pageData.used_balance == 0">微信支付</text>
				<text class="msg" v-if="pageData.pay_type == 1 && pageData.used_balance > 0">余额支付</text>
				<text class="msg" v-if="pageData.pay_type == 2">货到付款</text>
				<!-- <text class="msg" v-if='pageData.pay_type == 6 || pageData.pay_type == 7'>支付宝支付</text> -->
			</view>
		</view>
		<view class="Info">
			<view class="title">商品信息</view>
			<view class="goods-info">
				<view class="goods flex-box" v-for="(g, i) in pageData.goodsData" :key="i">
					<image class="goods-img" :src="$imgUrls(g.goods_img)" mode="aspectFill"></image>
					<view class="flex flex-box cloumn flex-between">
						<view class="goods-name lines">{{ g.goods_name }}</view>
						<view class="spe">{{ g.specs_bind_text }}</view>
						<view class="flex-box">
							<view>
								<text class="myPrice">{{ g.price.slice(0, g.price.length - 3) }}.</text>
								<text class="price-mini">{{ g.price.slice(g.price.length - 2, g.price.length) }}</text>
							</view>
							<view class="num flex"> x{{ g.goods_num }} {{ g.unit }} </view>
							<image
								src="/static/icon-edit.png"
								class="icon"
								@click="editPrice(g)"
								v-if="
									pageData.state == 0 ||
									(pageData.pay_type == 8 &&
										0 < parseInt(pageData.state) &&
										parseInt(pageData.state) < 4)
								">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="item flex-between">
				<text class="msg">应付金额</text>
				<view v-if="pageData.total">
					<text class="myPrice">{{ pageData.total.slice(0, pageData.total.length - 3) }}.</text>
					<text class="price-mini">{{
						pageData.total.slice(pageData.total.length - 2, pageData.total.length)
					}}</text>
				</view>
			</view>
		</view>
		<view class="Info">
			<view class="item flex-between">
				<text class="msg">运费</text>
				<text class="msg">{{ pageData.express_fee ? pageData.express_fee : '0.00' }}</text>
			</view>

			<view class="row j-sb a-center m-top10" v-if="pageData.vip_money > 0">
				<view class="d-flex f-column">
					<text class="msg">会员折扣</text>
					<view class="m-top4">{{ pageData.vip_title }}</view>
				</view>
				<view class="msg color_ff78 d-flex a-center">
					<text class="h6 color_ff78">-￥</text>
					<text class="size28 color_ff78">{{ pageData.vip_money }}</text>
				</view>
			</view>

			<view class="row j-sb a-center m-top10" v-if="pageData.act_money > 0">
				<view class="d-flex f-column">
					<text class="msg">活动</text>
					<view class="m-top4">{{ pageData.act_title }}</view>
				</view>
				<view class="msg color_ff78 d-flex a-center">
					<text class="h6 color_ff78">-￥</text>
					<text class="size28 color_ff78">{{ pageData.act_money }}</text>
				</view>
			</view>

			<view class="row j-sb a-center m-top10" v-if="pageData.dis_money > 0">
				<view class="d-flex f-column">
					<text class="msg">优惠劵</text>
					<view class="m-top4">{{ pageData.act_title }}</view>
				</view>
				<view class="msg color_ff78 d-flex a-center">
					<text class="h6 color_ff78">-￥</text>
					<text class="size28 color_ff78">{{ pageData.dis_money }}</text>
				</view>
			</view>

			<view class="row j-sb a-center m-top10" v-if="pageData.fen_to_money > 0">
				<view class="d-flex f-column">
					<text class="msg">积分兑换</text>
					<view class="m-top4">使用{{ pageData.used_fen }}积分</view>
				</view>
				<view class="msg color_ff78 d-flex a-center">
					<text class="h6 color_ff78">-￥</text>
					<text class="size28 color_ff78">{{ pageData.fen_to_money }}</text>
				</view>
			</view>

			<view class="line"></view>
			<view class="item flex-between">
				<text class="msg">实付金额</text>
				<view v-if="pageData.used_balance > 0">
					<text class="myPrice">{{ pageData.used_balance.slice(0, pageData.used_balance.length - 3) }}.</text>
					<text class="price-mini">{{
						pageData.used_balance.slice(pageData.used_balance.length - 2, pageData.used_balance.length)
					}}</text>
				</view>
				<view v-else>
					<text class="myPrice">{{ pageData.payment.slice(0, pageData.payment.length - 3) }}.</text>
					<text class="price-mini">{{
						pageData.payment.slice(pageData.payment.length - 2, pageData.payment.length)
					}}</text>
				</view>
			</view>
		</view>

		<view class="Info" v-if="pageData.courier_name && parseInt(pageData.state) > 1 && parseInt(pageData.state) < 6">
			<navigator
				:url="'logistics?order_id=' + pageData.order_id"
				hover-class="none"
				class="flex-between align-center">
				<text class="msg flex">物流信息</text>
				<text class="name">{{ pageData.courier_name }}</text>
				<text class="iconfont icon-more"></text>
			</navigator>
		</view>

		<!-- 	<view class="Info" v-if='pageData.state == 96'>
			<view class="title">退货原因</view>
			<view class="reason">买错了，不想要了</view>
		</view> -->

		<view class="Info" v-if="pageData.order_comment && pageData.order_comment.length > 0">
			<view class="title">订单评价</view>
			<view class="comment-box flex-box" v-for="(com, i) in pageData.order_comment" :key="i">
				<image :src="com.v_headimg ? com.v_headimg : '../../static/head.png'" mode="aspectFill" class="avatar">
				</image>
				<view class="flex">
					<view class="name">{{ com.v_name }}</view>
					<view class="date">{{ com.created_at }}</view>
					<view class="commentTxt">{{ com.comment_word }}</view>
					<view class="pics flex-box" v-if="com.comment_pic && com.comment_pic[0]">
						<image
							v-for="(p, c) in com.comment_pic"
							:key="c"
							:src="$imgUrls(p)"
							mode="aspectFill"
							@click="prevImg(com.comment_pic, c)"></image>
					</view>
					<view class="replay" v-if="com.comment_receive"> 已回复：{{ com.comment_receive }} </view>
				</view>
				<image src="../../static/icon-comment.png" class="icon" @click="replay(com)"></image>
			</view>
		</view>
		<view class="mask flex-box flex-center align-center" v-if="showComment" @click="showComment = false">
			<view class="adjustment" @click.stop>
				<view class="title">回复评价</view>
				<view class="msg">
					<view class="item flex-box align-center">
						<input
							type="text"
							class="flex"
							v-model="comment"
							:placeholder="'回复张三' + hisName + '的评论'"
							placeholder-class="pla"
							style="text-align: left" />
					</view>
				</view>
				<view class="btns flex-box">
					<view class="cancel" @click="showComment = false">取消</view>
					<view class="ok" @click="replayBack">回复</view>
				</view>
			</view>
		</view>

		<view class="btn-box" v-if="pageData.state == 1">
			<view @click="toUrl('/pages/order/sendOut?order_id=' + pageData.order_id)" v-if="pageData.delivery == 1"
				>去发货
			</view>
			<view @click="Stockup(pageData.order_id)" v-if="pageData.delivery == 2">备货完成</view>
		</view>
		<view class="btn-box" v-if="pageData.state == 2 && scanState == 1 && pageData.delivery == 2">
			<view @click="writeOff(pageData.order_id)">确认核销</view>
		</view>
		<view class="btn-box" v-if="pageData.state == 6">
			<view class="btn1" @click="backOff(pageData.order_id)">确定退单</view>
		</view>
		<view class="menus flex-box align-center" :class="{ show: showMore }">
			<text class="iconfont icon-back" :class="{ back: showMore }" @click="showMore = !showMore"></text>
			<view class="flex-box align-center ul">
				<view @click="back()">
					<text class="iconfont icon-icon121"></text>
					<view>返回</view>
				</view>
				<view @click="backHome">
					<text class="iconfont icon-icon12"></text>
					<view>首页</view>
				</view>
				<view :class="{ unread: parseFloat(chatNum) > 0 }" :data-num="chatNum" @click="contact">
					<text class="iconfont icon-icon13"></text>
					<view>客服</view>
				</view>
			</view>
		</view>

		<!-- 修改价格 -->
		<view class="mask flex-box flex-center align-center" v-if="showAdjustment" @click="showAdjustment = false">
			<view class="adjustment" @click.stop>
				<view class="title">价格调整</view>
				<view class="msg">
					<view class="flex-between align-center">
						<view class="goods-name lines">{{ currItem.goods_name }}</view>
						<view class="flex"></view>
						<view>
							<text class="myPrice">{{ currItem.price }}</text>
							<text class="num">x1</text>
							<text class="unit">{{ currItem.unit }}</text>
						</view>
					</view>
					<view class="item flex-box align-center">
						<text class="cla flex">商品单价</text>
						<text
							class="iconfont icon-jianshao2"
							:class="{ disabled: parseFloat(price) == 0 }"
							@click="update('price', 1)"></text>
						<input type="number" v-model="price" />
						<text class="iconfont icon-zengjia" @click="update('price', 2)"></text>
					</view>
					<view class="item flex-box align-center">
						<text class="cla flex">商品数量</text>
						<text
							class="iconfont icon-jianshao2"
							:class="{ disabled: num == 1 }"
							@click="update('num', 1)"></text>
						<input type="number" v-model="num" />
						<text
							class="iconfont icon-zengjia"
							:class="{ disabled: num >= stock }"
							@click="update('num', 2)"></text>
					</view>
				</view>
				<view class="btns flex-box">
					<view class="cancel" @click="showAdjustment = false">取消</view>
					<view class="ok" @click="editPrice_">确定</view>
				</view>
			</view>
		</view>

		<!-- 确认订单 -->
		<view class="mask flex-box flex-center align-center" v-if="showConfirm" @click="showConfirm = false">
			<view class="adjustment" @click.stop>
				<view class="title">确定订单已完成支付</view>
				<view class="msg">
					<view class="flex-box align-center">
						<view class="label">支付金额</view>
						<input type="text" class="flex InputBox" v-model="queryParams.money" placeholder-class="pla" />
					</view>
					<view class="flex-box m-top20 m-bot20">
						<view class="label">优惠</view>
						<radio-group class="flex-box f-wrap flex" @change="radioChange">
							<label
								class="flex-box align-center m-bot20 m-right20"
								v-for="(item, index) in radioList"
								:key="index">
								<radio
									:value="item.value"
									:checked="item.value == queryParams.discountType"
									color="#FF784A" />
								<view>{{ item.name }}</view>
							</label>
						</radio-group>
					</view>
					<view class="flex-box align-center">
						<view class="label">具体原因</view>
						<input
							type="text"
							class="flex InputBox"
							v-model="queryParams.discountText"
							placeholder-class="pla" />
					</view>
				</view>
				<view class="btns flex-box">
					<view class="cancel" @click="showConfirm = false">取消</view>
					<view class="ok" @click="confirmOrder">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that
	import API from '../../api/index.js'
	import '@/js_sdk/ican_H5Api/ican-H5Api'
	export default {
		data() {
			return {
				showMore: false,
				price: '',
				num: 1,
				stock: 10,
				showAdjustment: false,
				order_id: '',
				pageData: '',
				currItem: '',
				showComment: false,
				hisName: '',
				comment: '',
				comment_id: '',
				chatNum: 0,
				scanState: '',
				showConfirm: false,
				radioList: [
					{
						value: '99',
						name: '无',
					},
					{
						value: '1',
						name: '免开票',
					},
					{
						value: '2',
						name: '抹零',
					},
					{
						value: '4',
						name: '免单',
					},
					{
						value: '3',
						name: '打折',
					},
					{
						value: '5',
						name: '其他',
					},
				],
				queryParams: {
					money: '',
					discountType: '99',
					discountText: '',
				},
			}
		},
		onShow() {
			that = this
			API.user.getChatNum().then((num) => {
				that.chatNum = num
			})
		},
		onLoad(e) {
			that = this
			this.scanState = uni.getStorageSync('scanState')
			if (e.scanState) this.scanState = e.scanState
			if (e.shop_id) {
				uni.setStorageSync('store_id', e.shop_id)
			}
			if (e.id) {
				that.order_id = e.id
				that.getDetail()
			}
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
		},
		methods: {
			contact() {
				if (that.pageData.service_state == 21) {
					// 开启了客服系统
					that.toUrl('/pages/message/consult?id=' + that.pageData.v_id)
				} else {
					uni.makePhoneCall({
						phoneNumber: that.pageData.utel,
					})
				}
			},
			prevImg(data, i) {
				let arry = []
				data.forEach((item) => {
					item = that.$imgUrls(item)
					arry.push(item)
				})
				uni.previewImage({
					current: i,
					urls: arry,
					indicator: 'number',
				})
			},
			editPrice(item) {
				that.currItem = item
				that.price = parseFloat(item.price)
				that.showAdjustment = true
			},
			editPrice_() {
				that.$http
					.post({
						url: '/singleSaleManageApi/orderEdit',
						data: {
							shop_id: uni.getStorageSync('store_id'),
							info_id: that.currItem.order_info_id,
							num: that.num,
							price: that.price,
						},
					})
					.then((res) => {
						if (res.code == 100) {
							that.showAdjustment = false
							that.getDetail()
						}
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					})
			},
			writeOff(order_id) {
				uni.showModal({
					title: '是否确定用户已提货？',
					content: '确认核销后将完成本次交易',
					confirmText: '确认核销',
					cancelColor: '#999999',
					confirmColor: '#FF784A',
					success: function (res) {
						if (res.confirm) {
							that.$http
								.post({
									url: '/singleSaleManageApi/orderFinish',
									data: {
										shop_id: uni.getStorageSync('store_id'),
										order_id: order_id,
									},
								})
								.then((res) => {
									if (res.code == 200) {
										uni.removeStorageSync('scanState')
										that.getDetail()
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
										})
									}
								})
						}
					},
				})
			},
			Stockup(order_id) {
				uni.showModal({
					title: '是否确定已备货完成？',
					content: '备货完成后用户将随时抵达提货',
					confirmText: '备货完成',
					cancelColor: '#999999',
					confirmColor: '#FF784A',
					success: function (res) {
						if (res.confirm) {
							that.$http
								.post({
									url: '/singleSaleManageApi/prepareGoods',
									data: {
										shop_id: uni.getStorageSync('store_id'),
										order_id: order_id,
									},
								})
								.then((res) => {
									if (res.code == 200) {
										that.getDetail()
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
										})
									}
								})
						}
					},
				})
			},
			backOff(order_id) {
				uni.showModal({
					title: '是否已收到退货商品？',
					content: '确定退单后，退款金额将原路退返客户',
					confirmText: '确定退单',
					cancelColor: '#999999',
					confirmColor: '#FF784A',
					success: function (res) {
						if (res.confirm) {
							that.$http
								.post({
									url: '/singleSaleManageApi/singleSaleRefuse',
									data: {
										shop_id: uni.getStorageSync('store_id'),
										order_id: order_id,
									},
								})
								.then((res) => {
									if (res.code == 200) {
										that.getDetail()
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
										})
									}
								})
						}
					},
				})
			},
			getDetail() {
				that.$http
					.get({
						url: '/singleSaleManageApi/orderDetail',
						data: {
							shop_id: uni.getStorageSync('store_id'),
							order_id: that.order_id,
							// test:1
						},
					})
					.then((res) => {
						if (res.errcode == 100 && res.data) {
							that.pageData = res.data
							that.queryParams.money = res.data.payment
						}
					})
			},
			update(type, bb) {
				if (type == 'price') {
					if (bb == 1 && that.price > 0) {
						that.price = that.price - 1
						if (that.price < 0) {
							that.price = 0
						}
					}
					if (bb == 2) {
						that.price = that.price + 1
					}
				}
				if (type == 'num') {
					if (bb == 1 && that.num > 1) {
						that.num = parseFloat(that.num) - 1
					}
					if (bb == 2) {
						if (that.num >= that.stock) {
							uni.showToast({
								title: '库存不足',
								icon: 'none',
							})
							return
						}
						that.num = parseFloat(that.num) + 1
					}
				}
			},
			copy_text: function (copyData) {
				uni.setClipboardData({
					data: copyData,
					success: function () {
						uni.showToast({
							title: '订单编号复制成功',
							icon: 'success',
						})
					},
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: that.pageData.utel,
				})
			},
			replay(item) {
				that.hisName = item.v_name
				that.comment_id = item.comment_id
				that.showComment = true
			},
			replayBack() {
				if (!that.comment.trim()) {
					uni.showToast({
						title: '回复内容不能为空哦',
						icon: 'none',
					})
					return
				}
				that.$http
					.post({
						url: '/singleSaleManageApi/orderReceive',
						data: {
							shop_id: uni.getStorageSync('store_id'),
							comment_id: that.comment_id,
							comment_receive: that.comment,
						},
					})
					.then((res) => {
						if (res.code == 100) {
							that.showComment = false
							that.getDetail()
							uni.showToast({
								title: res.data,
								icon: 'none',
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							})
						}
					})
			},
			radioChange(e) {
				this.queryParams.discountType = e.detail.value
			},
			confirmOrder() {
				if (!that.queryParams.money) return that.showToast('支付金额不能为空')
				console.log(that.queryParams)
				that.$http
					.post({
						url: '/singleSaleManageApi/orderOfflinePay',
						data: {
							...that.queryParams,
							shop_id: uni.getStorageSync('store_id'),
							order_id: that.order_id,
							orderCode: that.pageData.order_code,
							uid: uni.getStorageSync('uid'),
						},
					})
					.then((res) => {
						if (res.code == 100) {
							that.showConfirm = false
							that.getDetail()
						}
						that.showToast(res.msg)
					})
			},
		},
	}
</script>

<style lang="scss">
	.page {
		padding: 140rpx $page-space;

		.top-box {
			height: 472rpx;
			background: linear-gradient(360deg, rgba(255, 120, 74, 0) 0%, #ff784a 100%);
			padding-top: 42rpx;
			padding: 40rpx;
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;

			&.filter {
				filter: grayscale(1);
				opacity: 0.45;
			}

			.state {
				color: white;
				font-size: 36rpx;
				padding-left: 60rpx;
			}

			.state-img {
				position: absolute;
				width: 414rpx;
				height: 178rpx;
				top: 0;
				right: 126rpx;
			}
		}

		.Info {
			padding: $page-space;
			margin-bottom: $page-space;
			border-radius: $border-radius-base;
			background-color: #ffffff;
			position: relative;
			z-index: 3;

			.title {
				color: #999999;
				font-weight: 400;
				color: #999999;
				font-size: 24rpx;
			}

			.price-mini {
				color: $uni-color-price;
				font-size: 22rpx;
				align-self: flex-end;
			}

			.msg {
				font-size: 28rpx;
			}

			.icon-more {
				font-size: 32rpx;
			}

			.name {
				color: #666666;
				font-size: 28rpx;
				margin-right: 30rpx;
			}

			.item {
				margin-top: 20rpx;

				.myPrice {
					color: $uni-color-price;
					font-size: 28rpx;
				}

				.copy {
					color: $uni-color-primary;
				}
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
			}

			.goods-info {
				margin-top: 20rpx;

				.goods {
					.goods-img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 6rpx;
						margin-right: 30rpx;
					}

					margin-bottom: 24rpx;

					.goods-name {
						font-weight: 600;
						font-size: 28rpx;
					}

					.spe,
					.num {
						color: #666666;
					}

					.num {
						margin-left: 30rpx;
					}

					.myPrice {
						color: $uni-color-price;
						font-size: 28rpx;
					}
				}
			}

			.line {
				height: 1px;
				margin-top: 20rpx;
				background-color: #f5f5f5;
				margin-left: -$page-space;
				margin-right: -$page-space;
			}

			.reason {
				font-size: 28rpx;
				color: #000000;
				margin-top: 20rpx;
			}
		}

		.comment-box {
			margin-top: 20rpx;

			.avatar {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				margin-right: 24rpx;
			}

			.date {
				color: #818181;
			}

			.name {
				color: #333333;
			}

			.replay {
				background-color: rgba(255, 120, 74, 0.06);
				color: $uni-color-primary;
				border-radius: 6rpx;
				padding: 16rpx 10rpx;
				margin-top: 15rpx;
			}

			.commentTxt {
				color: #000000;
				font-size: 28rpx;
				margin-top: 14rpx;
			}

			.pics {
				margin-top: 20rpx;
				overflow: hidden;
				flex-wrap: wrap;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: calc(33.33% - 8rpx);
					height: 170rpx;
					margin-right: 12rpx;
					margin-bottom: 12rpx;

					&:nth-of-type(3n) {
						margin-right: 0;
					}

					&:nth-last-of-type(1),
					&:nth-last-of-type(2),
					&:nth-last-of-type(3) {
						margin-bottom: 0;
					}
				}
			}
		}

		.btn-box {
			height: 128rpx;
			background-color: #ffffff;
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			padding: 20rpx 88rpx;
			z-index: 3;
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

			view {
				font-size: $font-size-lg;
				text-align: center;
				background: #ff784a linear-gradient(157deg, rgba(255, 255, 255, 0.37) 0%, rgba(255, 255, 255, 0) 100%);
				border-radius: 44rpx;
				line-height: 88rpx;
				color: $fff;
			}
		}

		.menus {
			height: 90rpx;
			// width: 322rpx;
			min-width: 66rpx;
			position: fixed;
			background: rgba(0, 0, 0, 0.5);
			right: 0;
			z-index: 3;
			bottom: calc(168rpx + constant(safe-area-inset-bottom));
			bottom: calc(168rpx + env(safe-area-inset-bottom));
			border-radius: 44rpx 0 0 44rpx;
			text-align: center;
			color: $fff;
			right: -250rpx;
			transition: all 0.3s;

			&.show {
				right: 0;
			}

			.icon-back {
				color: inherit;
				font-size: 34rpx;
				margin-left: 20rpx;

				&.back {
					transition: all 0.2s;
					transform: rotate(180deg);
				}
			}

			.ul {
				width: 256rpx;
				overflow: hidden;
				justify-content: space-around;
			}

			view {
				color: inherit;

				.iconfont {
					color: inherit;
					font-size: 42rpx;
					position: relative;
				}
			}

			.unread::after {
				top: 0;
			}
		}

		.adjustment {
			background-color: #ffffff;
			width: 590rpx;
			border-radius: $border-radius-base;
			overflow: hidden;

			.title {
				text-align: center;
				padding: 48rpx 0;
				font-size: 36rpx;
				font-weight: 600;
			}

			.msg {
				padding: 0 30rpx;

				.label {
					font-size: 28rpx;
					min-width: 140rpx;
					text-align: right;
					padding-right: 20rpx;
				}

				.InputBox {
					height: 80rpx;
					border-radius: 40rpx;
					border: 1px solid #eeeeee;
					padding: 0 30rpx;
				}

				.goods-name {
					font-size: 28rpx;
					max-width: 240rpx;
				}

				.myPrice {
					color: $uni-color-price;
					font-size: 28rpx;
					margin-right: 6rpx;
				}

				.unit {
					color: #666666;
					font-size: 20rpx;
				}

				.item {
					margin-top: 28rpx;
					height: 88rpx;
					border-radius: 44rpx;
					border: 1px solid #eeeeee;
					padding: 0 30rpx;

					input {
						width: 200rpx;
						height: 100%;
						padding: 0 10rpx;
						text-align: center;
						font-size: 28rpx;
					}

					.cla {
						color: #999999;
						font-size: 28rpx;
					}

					.iconfont {
						font-size: 34rpx;
						color: $uni-color-primary;
					}

					.disabled {
						color: #eeeeee;
					}
				}
			}

			.btns {
				height: 88rpx;
				line-height: 88rpx;
				margin-top: 74rpx;

				.cancel {
					color: #4c4c4c;
					font-size: 32rpx;
					flex: 1;
					text-align: center;
					border-top: 1px solid #eeeeee;
				}

				.ok {
					flex: 1;
					text-align: center;
					color: #ffffff;
					background-color: $uni-color-primary;
					font-size: 32rpx;
				}
			}
		}
	}
</style>
